<template>
  <base-page-view class-name="page-container product-material">
    <view class="sticky-wrapper">
      <horizontal-list v-if="categoryList.length" list-name="category" :list="categoryList" @itemClick="categoryClick">
        <template v-slot="{item}">
          <view class="title">{{ item.title }}</view>
        </template>
      </horizontal-list>
    </view>
    <template v-for="(item, index) in productList">
      <view :key="index" class="block">
        <view v-if="item.category_title" class="block_title">{{ item.category_title }}</view>
        <view v-if="item.social_material_v_o_s.length" class="block_content">
          <view v-for="(mItem, mIndex) in item.social_material_v_o_s" :key="mIndex" class="block-item" @click="materialClick(mItem)">
            <view class="block-item_content">
              <b-image class-name="image" :src="mItem.cover" mode="aspectFill" />
              <view class="block-item-share">{{ mItem.share_num | formatNumber(2, true) }}人分享</view>
              <view class="block-item-title">{{ mItem.title }}</view>
            </view>
          </view>
        </view>
        <view v-else class="block_content">
          <msg-page class-name="block-empty" :type="listEmpty.type" :text="listEmpty.text" width="210" height="210" />
        </view>
      </view>
    </template>
    <base-list-state :list-length="listLength" :list-query="listQuery" :list-state="listState" :list-empty="listEmpty" />
  </base-page-view>
</template>
<script>
import horizontalList from '@/components/horizontalList/index'
import msgPage from '@/components/msgPage'
import { debounce } from '@/utils/tools'
import './index.scss'
export default {
  name: 'ProductMaterial',
  components: {
    horizontalList,
    msgPage
  },
  data() {
    return {
      parentId: '',
      categoryList: [],
      categoryIndex: 0,
      listQuery: {
        category_id: '',
        page_no: 1,
        page_size: 10,
        user_id: ''
      },
      listState: {
        loading: false,
        more: true
      },
      listEmpty: {
        type: 'empty_list',
        text: '暂无数据'
      },
      productList: []
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.productList.length
    }
  },
  onLoad(options) {
    this.parentId = options.id
    this.listQuery.user_id = this.userInfo.uid
    if (this.parentId) {
      this.fetchData()
    }
  },
  onPullDownRefresh() {
    this.listQuery.page_no = 1
    this.fetchData()
  },
  onReachBottom: debounce(function() {
    if (this.listState.more && !this.listState.loading) {
      this.listQuery.page_no++
      this.fetchProductData()
    }
  }, 500),
  methods: {
    // 获取产品素材所有分类
    async fetchData() {
      this.listState.loading = true

      const res = await this.$api.materialApi.getSubCategoryAll({ parent_id: this.parentId })
      if (res.success) {
        this.categoryList = res.data || []
        if (this.categoryList.length) {
          const category = this.categoryList[this.categoryIndex]
          this.listQuery.category_id = category.id
          this.listQuery.page_no = 1
          this.fetchProductData()
        } else {
          setTimeout(() => {
            this.listState.loading = false
            uni.stopPullDownRefresh()
          }, 500)
        }
      } else {
        setTimeout(() => {
          this.listState.loading = false
          uni.stopPullDownRefresh()
        }, 500)
      }
    },
    async fetchProductData() {
      this.listState.loading = true
      const res = await this.$api.materialApi.getProductMaterial({ ...this.listQuery })
      if (res.success) {
        if (this.listQuery.page_no === 1) {
          this.productList = []
        }
        const list = res.data || []
        this.productList = this.productList.concat(list)
        this.listState.more = list.length === this.listQuery.page_size
      }
      setTimeout(() => {
        uni.stopPullDownRefresh()
        this.listState.loading = false
      }, 500)
    },
    // 点击顶部分类
    categoryClick(index) {
      this.categoryIndex = index
      const category = this.categoryList[this.categoryIndex]
      this.listQuery.category_id = category.id
      this.listQuery.page_no = 1
      this.fetchProductData()
    },
    materialClick(item) {
      this.$navigateTo(`/pagesMaterial/product/detail?id=${item.id}&title=${item.title}&show_type=${item.show_type}`)
    }
  }
}
</script>
